<template>
    <!--新增角色组弹窗-->
    <el-dialog  :visible.sync="newDialogVisible" :show-close="false" width='750px' :before-close="closeFn">
            <i class="el-icon-error" @click='$emit("issueVisibleChangeFn",false)'></i>
            <div class="dialogTitle">{{dialogTitle}}</div>
            <div class="selected"><span>*</span>已选资产：{{issueName}}</div>
            <div class="selectList">
                 <div class="left"><span>*</span>选择使用方式：</div>
                 <div class="right">
                     <div class="selectType"><el-radio v-model="postData.re_type" label="1"><span class="tip">个人使用</span></el-radio></div>
                     <div class="inputMain">
                         <div @click="pickMan" style="margin-right:15px;">
                             <el-input v-model="postData.userName" placeholder="请先选择人"></el-input>
                         </div>
                         <div>
                            <el-select v-model="postData.dept_id"  placeholder="选择他所在的部门">
                                 <el-option v-for="(item,index) in deptList" :key="index" :label="item.re_dept_name" :value="item.re_dept_id"></el-option>
                            </el-select>
                         </div>
                     </div>
                     <div class="selectType"><el-radio v-model="postData.re_type" label="2"><span class="tip">部门使用</span></el-radio></div>
                     <div class="inputMain">
                         <div @click="pickDept">
                            <el-input v-model="postData.departmentsName" placeholder="请选择部门"></el-input>
                         </div>
                     </div>
                 </div>
            </div>
            <div class="btns">
                <el-button @click="onSubmit" type="primary">确认</el-button>
                <el-button @click="closeFn" class="cancelBtn">取消</el-button>
            </div>
    </el-dialog>
</template>

<script>
import {getCheckUser} from "@/api" 
import {complexPicker,departmentsPicker} from '@/libs/utils'
export default {
    name:"dialogVue",
    data(){
        return {
            newDialogVisible:false,
            postData : {
                re_type:'1',
                ids:'',
                users:'',
                userName:'',
                departments:'',
                departmentsName:'',
                dept_id:''
            },
            deptList:[]
        }
    },
    props:{
        issueVisible:Boolean,
        issueIds:[String,Number],
        issueName:String,
        dialogTitle:String,
        wh_id:String
    }, 
    created(){
        this.postData.ids = this.issueIds.toString()
        console.log(this.postData.ids)
    },
    watch:{
        issueVisible:{
            handler(news){
                this.newDialogVisible = news
                if(!news){
                    this.postData = {
                        re_type:'1',
                        ids:'',
                        users:'',
                        userName:'',
                        departments:'',
                        departmentsName:'',
                        dept_id:''
                    }
                }
            },
            immediate: true,
        },
        issueIds(news){
           this.postData.ids = news
           console.log(news,'news')
        }
    },
    methods:{
        closeFn(){
            this.$emit('issueVisibleChangeFn',false)
        },
        /**选人 */
        pickMan(){
            console.log('***************')
            let that = this
            complexPicker(this,
                {
                    useridArr:this.postData.users?[this.postData.users]:[],
                    bool:true,
                    maxUsers:1
                },
            function(res){
                console.log(res,'选人')
                that.postData.users = res.users
                that.postData.userName = res.userArr
                console.log(that.postData,'选人')
                getCheckUser({userid:res.user_id,wh_id:that.wh_id}).then(res=>{
                    that.deptList = res
                    if(res&&res.length == 1)that.postData.dept_id=res[0].re_dept_id
                    if(!res||(!res.length))that.$message.error('该用户没有部门，无法转移');
                })
            })
        },
        /**选部门 */
        pickDept(){
            let that = this
            let pickedDepartments = this.postData.re_type == 1 ?
            this.postData.userDepartments?[this.postData.userDepartments]:[]
            :this.postData.departments?[this.postData.departments]:[]
            departmentsPicker(this,{pickedDepartments,maxDept:1},function(res){
                that.postData.departments = res.departments
                that.postData.departmentsName = res.deptArr
                console.log(that.postData,'选部门')
            })
            // })
        },
        /*表单提交*/
        onSubmit(){
            let {re_type,users,userDepartments,departments} = this.postData
            console.log(this.postData,'点击确认')
            let obj = {}
            if(re_type==1){
               if(users == ''){
                   this.$message('下发人员不能为空');
                   return false
               }else if(users != '' && userDepartments == ''){
                   this.$message('下发人员所在部门不能为空');
                   return false
               }
               obj = {
                   ...this.postData,
                   users:JSON.stringify(users)
               }
            }else{
               if(departments == ''){
                   this.$message('下发部门不能为空');
                   return false
               }
               obj = {
                   ...this.postData,
                   departments:JSON.stringify(departments)
               }
               this.postData.dept_id == ''
            }
            console.log(obj,'点击确认')
            this.$emit('goSubmit',obj)
        },
    }
}
</script>

<style lang='scss'>
.el-dialog{
    .el-input__inner{
        padding: 5px 15px 0 !important
    }
    position: relative;
    .el-dialog__header{
        display: none !important
    }
    .el-dialog__body{
        padding:34px 20px 20px !important;
    }
    .dialogTitle{
        line-height : 29px;
        color: rgba(16, 16, 16, 1);
        font-size: 20px;
        margin: 0 0 37px 47px;
        font-family: SourceHanSansSC-regular;
    }
    .el-icon-error{
        font-size:22px ;
        color:rgb(206,206,206);
        position: absolute;
        right:14px ;
        top:14px;
        cursor:pointer
    }
    .selected{
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        margin-left: 47px;
        span{
            color: rgba(229, 28, 35, 1);
            font-size: 14px;
        }
    }
    .selectList{
        margin: 37px 0 70px 19px;
        display: flex;
        .left{
           color: rgba(16, 16, 16, 1);
           display: flex;
           padding-top:3px;
           span{
              color: rgba(229, 28, 35, 1);
              font-size: 14px;
           }
        }
        .right{
            .selectType{
                .el-radio{
                    display: flex !important;
                    align-items: center !important;
                    height: 20px !important;
                    .el-radio__label{
                        padding-left: 7px !important;
                    }
                    .el-radio__inner{
                        width:18px !important;
                        height:18px !important;
                        border:2px solid #5677fc!important;
                        background: #fff!important;
                        &::after{
                            width:10px !important;
                            height:10px !important;
                            background:#5677fc !important;
                        }
                    }
                    .el-radio__label{
                        color: rgba(16, 16, 16, 1);
                        font-size: 15px;
                        font-weight: 600;
                        padding-bottom: 2px;
                    }
                }
                .tip{
                    color: rgba(16, 16, 16, 1);
                    font-size: 14px;
                    font-weight: 400 !important
                }
            }
            .inputMain{
                display: flex;
                margin: 15px 0 19px 25px;
                height: 40px;
                .el-input{
                    // margin-right:13px;
                    max-width: 200px !important
                }
            }
        }
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        .el-button--small{
            padding: 10px 13px 7px!important
        }
    }
}

    
</style>